<template>
    <view class="pageIndex">
        <view class="card goods">
            <view class="shop_name align-center">
                <uni-icons type="shop" size="20"></uni-icons>
                <text>北京路门店</text>
            </view>
            <view class="goodsitem flex-row">
                <view class="thumb">
                    <image src="" mode="aspectFill"></image>
                </view>
                <view class="goods_title">【xxxx】wwwwwww</view>
            </view>
            <view class="line"></view>
            <view class="tbox justify-between align-center">
                <view class="tags ellipsis2">
                    免预约 ·随时退·过期退·可赠送好友
                    到店使用·周一至周日可用
                </view>
                <view class="bbbb align-center" @click="xuzhi">
                    购买须知
                    <uni-icons type="right" size="20"></uni-icons>

                </view>
            </view>
        </view>
        <view class="card justify-between">
            <view class="title">购买份数</view>
            <view>
                <uni-number-box @change="changeValue" />
            </view>
        </view>
        <view class="card">
            <view class="title">本单可享</view>
            <view class="coupone justify-between">
                <view>优惠券</view>
                <picker mode="selector">
                    <view class="selist align-center">
                            暂无可用
                            <uni-icons type="right" size="20" color="#9E9E9E"></uni-icons>
                    </view>
                </picker>
            </view>
        </view>
        <view class="card justify-between">
            <view class="title align-center">
                <image src="@/static/icon/wxpay.png" mode="widthFix"></image>
                微信支付
            </view>
            <view>
                <uni-data-checkbox v-model="paycat" :localdata="paylist" selectedColor="#F9933B" />
            </view>
        </view>
        <view class="footer">
            <view class="tips justify-center align-center">
                温馨提示：本商品需到店使用，不支持快递邮寄
            </view>
            <view class="payinfo justify-between align-center">
                <view class="chprice align-end">
                    <view class="ch">实付</view>
                    <view class="price">
                        <text class="y">￥</text>
                        <text class="p">188</text>
                    </view>
                </view>
                <view class="btn">确认支付</view>
            </view>
        </view>
        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
            <view class="close justify-end" style="margin-top: 10rpx;margin-right: 10rpx;" @click="closepop()">
                <uni-icons type="close" size="30" color="#c7c9ce"></uni-icons>
            </view>
            <view class="xuzhi">
                goumai xuzhi
                
                
            </view>
        </uni-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return{
                paylist:[
                    {text:"",value:'wxpay'}
                ],
                paycat:"wxpay"
            }
        },
        onLoad(){
            
        },
        methods:{
            xuzhi(){
                this.$refs.popup.open('bottom')
            },
            closepop(){
                this.$refs.popup.close()
            },
            changeValue(e){}
        }
    }
</script>

<style lang="scss">
@import '../common/common.scss';
.card{
    width: 700rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 17rpx 9rpx 0rpx rgba(234,234,234,0.23);
    border-radius: 20rpx;
    padding: 25rpx;
    margin: 0 auto;
    margin-top: 17rpx;
    .title{
        font-weight: 800;
        font-size: 28rpx;
        image{
            width: 35rpx;
            margin-right: 10rpx;
        }
    }
    .coupone{
        margin-top: 54rpx;
        font-size: 24rpx;
        .selist{
            color: #9E9E9E;
        }
    }
}
.goods{
    .shop_name{
        font-size: 28rpx;
        text{
            margin-left: 10rpx;
        }
    }
    .goodsitem{
        margin-top: 30rpx;
        .thumb{
            width: 135rpx;
            height: 135rpx;
            margin-right: 40rpx;
            border-radius: 10rpx;
            background-color: #ccc;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .goods_title{
            font-size: 30rpx;
            font-weight: 800;
        }
    }
    .tbox{
        margin-top: 20rpx;
        font-size: 28rpx;
        color: #282828;
        .tags{
            width: 442rpx;
            line-height: 48rpx;
          
        }
        .bbbb{
            
        }
    }
}
.xuzhi{
    padding: 20rpx;
}
.footer{
    position: fixed;
    bottom: env(safe-area-inset-bottom);
    left: 0;
    width: 100%;
    height: 208rpx;

    .tips{
        width: 100%;
        height: 81rpx;
        background-color: rgba(#F9933B,0.15);
        color:#F9933B ;
    }
    .payinfo{
            padding: 0 25rpx;
        height: 127rpx;
        width: 100%;
        .chprice{
            .ch{
                font-size: 25rpx;
            }
            .price{
                color: var(--price-color);
                .y{
                    font-size: 25rpx;
                }
                .p{
                    font-size: 48rpx;
                    font-weight: bold;
                }
            }
        }
        .btn{
            width: 323rpx;
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
            background: #F9933B;
            border-radius: 20rpx;
            color: #fff;
            
        }
    }
}
</style>